<template>
  <div id="app">
    <MyHeader></MyHeader>
    <router-view />
    <MyFooter></MyFooter>
    <MyMine></MyMine>
  </div>
</template>

<script>
import MyHeader from "@/components/myHeader";
import MyFooter from "@/components/myFooter";
import MyMine from "@/components/myMine";
export default {
  name: "App",
  data() {
    return {};
  },
  components: {
    MyHeader,
    MyFooter,
    MyMine
  },
  created() {
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    } 

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  },
};
</script>

<style>
#app{
  display: flex;
  flex-direction: column;
}
body,html{
  margin:0px;
  padding: 0px;
}
.btn { /* 按钮美化 */
	border-width: 0px; /* 边框宽度 */
	border-radius: 3px; /* 边框半径 */
	background: #1E90FF; /* 背景颜色 */
	cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
	outline: none; /* 不显示轮廓线 */
	font-family: Microsoft YaHei; /* 设置字体 */
	color: white; /* 字体颜色 */
	font-size: 14px; /* 字体大小 */
    padding: 8px 30px;
}
.btn:hover { /* 鼠标移入按钮范围时改变颜色 */
	background: #5599FF;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
ul{
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}
li{
  list-style: none;
  float: left;
}
a{
  text-decoration: none;
  color: #000;
}
p{
  margin: 0px;
  padding: 0px;
}
.clearfix {
    *zoom: 1;
    clear: both;
    overflow: hidden;
}
</style>
